﻿<%@ Page Title="" Language="C#" MasterPageFile="~/html/MyBlog.Master" AutoEventWireup="true" CodeBehind="Detail.aspx.cs" Inherits="HelloLLLLL.Blog.html.Detail" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 
    <title><%=Arti.Title %></title>
    <!-- 本页特有的css -->
    <link rel="stylesheet" href="../res/css/article-detail.css">
    <link rel="stylesheet" href="../res/css/wangEditor.css">
    <link rel="stylesheet" href="../res/css/prettify.css">
 

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <div class="layui-container">
            <blockquote class="layui-elem-quote sitemap shadow">
                <i class="layui-icon">&#xe715;</i>
                <span class="layui-breadcrumb" lay-separator=">">
                    <a href="/html/Index.aspx">首页</a>
                    <a href="/html/ArticleList.aspx">点滴积累</a>
                    <a><cite><%=Arti.Title %></cite></a>
                </span>
            </blockquote>
            <div class="layui-row layui-col-space15 clearfix">
                <div class="layui-col-md8 left">
                    <div data-fontsize="14" class="article-detail shadow">
                        <div class="article-tool">
                            <div style="float:left;">
                                <button class="layui-btn layui-btn-primary layui-btn-xs"
                                    title="发布日期"><%=Arti.CreateTime %></button>
                                <div class="layui-btn-group">
                                    <button class="layui-btn layui-btn-primary layui-btn-xs" title="浏览">
                                        <i class="fa fa-eye fa-fw"></i><span style="margin-left:3px;"><%=Arti.ReadCount %></span>
                                    </button>
                                    <button class="layui-btn layui-btn-primary layui-btn-xs" title="评论">
                                        <i class="fa fa-comments fa-fw"></i><span style="margin-left:3px;"><%=Arti.CommentCount %></span>
                                    </button>
                                </div>
                            </div>
                            <div class="tool-box">
                                <div class="layui-btn-group">
                                    <button class="layui-btn layui-btn-primary layui-btn-xs" title="静音">
                                        <i class="fa fa-volume-up fa-fw"></i>
                                    </button>
                                </div>
                                <div class="layui-btn-group layui-hide-xs">
                                    <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体缩小">
                                        <i class="fa fa-minus fa-fw"></i>
                                    </button>
                                    <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体还原">
                                        <i class="fa fa-undo fa-fw"></i>
                                    </button>
                                    <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体放大">
                                        <i class="fa fa-plus fa-fw"></i>
                                    </button>
                                </div>
                                <div class="layui-btn-group layui-hide-xs">
                                    <button class="layui-btn layui-btn-primary layui-btn-xs" title="展开阅读">
                                        <i class="fa fa-arrows-h fa-fw"></i>
                                    </button>
                                    <button class="layui-btn layui-btn-primary layui-btn-xs" title="全屏阅读">
                                        <i class="fa fa-arrows-alt fa-fw"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="article-detail-title"><%=Arti.Title %></div>
                        <div class="article-detail-abstract">
                            <span class="layui-badge">摘要</span>
                            <span id="abstract"><%=Arti.Digest %></span>
                        </div>
                        <div class="article-detail-content w-e-text">
                          <%=Arti.Content %>
                        </div>
                    </div>
                    <div class="article-component">
                        <div class="component-box">
                            <a href="javascript:;" class="praise" blog-event="praise"><i
                                    class="fa fa-thumbs-up fa-fw"></i>点赞（<span id="praiseCnt">0</span>）</a>
                            <a href="javascript:;" class="reword" blog-event="reword">赏</a>
                            <a href="javascript:;" class="share" blog-event="share"><i
                                    class="fa fa-share-alt fa-fw"></i>分享（<span id="shareCnt">0</span>）</a>
                            </div>
                    </div>
                    <div class="blog-card blog-card-padding shadow">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                            <legend>来说两句吧</legend>
                            <div class="layui-field-box">
                                <form class="layui-form blog-editor" action="">
                                    <div class="layui-form-item">
                                        <input type="hidden" name="artId" id="hidArticleId" value="<%=Arti.Id%>"/>
                                        <input type="hidden" name="artTitle" value="<%=Arti.Title %>"" />
                                        <div class="layui-input-inline"  style="width:180px;margin-right:10px"> <input type="text" name="nick"  value=""  placeholder="昵称" class="layui-input"></div>
                                       <div class="layui-input-inline"  style="width:180px;margin-right:10px"> <input type="text" name="personEmail" value="" placeholder="邮箱" class="layui-input" ></div>
                                       <input type="text" name="personHome"  placeholder="个人主页http://" value="" class="layui-input" style="width:220px" >
                                        <textarea name="EditorContent" lay-verify="content" id="remarkEditor"
                                            placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                                        <!-- 禁止评论 -->
                                        <!-- <div style="border:1px solid #f2f2f2;" class="emptybox">
                                            <p><i style="font-size:50px;color:#5fb878" class="layui-icon">&#x1007;</i>
                                            </p>
                                            <p>该文章已禁止评论</p>
                                        </div> -->
                                    </div>
                                    <div class="layui-form-item">
                                        <button class="layui-btn" lay-submit="formRemark"
                                            lay-filter="formRemark">提交评论</button>
                                    </div>
                                </form>
                            </div>
                        </fieldset>
                        <div class="blog-card-title">最新评论</div>
                        <ul class="blog-comment">
                            <%if (null != ListParent)
                                    { %>
                            <%for (int m = 0; m < ListParent.Count; m++)
                                    {%>
                            
                            
                            <li>
                                <div class="comment-parent">
                                    <a name="remark-@item.Id"></a>
                                    <img src="../res/images/Leo.jpg" alt="<%=ListParent[m].Pubnisher %>" />
                                    <div class="info">
                                        <span class="username"><%=ListParent[m].Pubnisher %></span>
                                    </div>
                                    <div class="content"><%=ListParent[m].Content %></div>
                                    <p class="info info-footer"><span class="time"><%=ListParent[m].CTime%></span><a href="javascript:;" class="btn-reply" data-targetid="<%=ListParent[m].Id %>" data-targetname="<%=ListParent[m].Pubnisher %>">回复</a></p>
                                </div>
                                <hr />
                                
                                <%=LoopList(ListParent[m].ChildPL, ListParent[m].Pubnisher, ListParent[m].Id) %>
                                <%Sb.Clear(); %>
                                 <!-- 回复编辑器 -->    
                                <div class="replycontainer layui-hide">
                                    <form class="layui-form" action="">
                                        <div class="layui-form-item">
                                        <input type="hidden" name="artId" value="<%=Arti.Id%>"/>
                                        <input type="hidden" name="artTitle" value="<%=Arti.Title %>"" />
                                        <div class="layui-input-inline"  style="width:180px;margin-right:10px"> <input type="text" name="nick"  value=""  placeholder="昵称" class="layui-input"></div>
                                       <div class="layui-input-inline"  style="width:180px;margin-right:10px"> <input type="text" name="personEmail" value="" placeholder="邮箱" class="layui-input" ></div>
                                       <input type="text" name="personHome"  placeholder="个人主页http://" value="" class="layui-input" style="width:220px" >
                                        <input type="hidden"  name="targetUserId" />
                                        <!-- 禁止评论 -->
                                        <!-- <div style="border:1px solid #f2f2f2;" class="emptybox">
                                            <p><i style="font-size:50px;color:#5fb878" class="layui-icon">&#x1007;</i>
                                            </p>
                                            <p>该文章已禁止评论</p>
                                        </div> -->
                                    </div>
                                        <div class="layui-form-item"><textarea name="replyContent" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>
                                        </div>
                                        <div class="layui-form-item">
                                            <button class="layui-btn layui-btn-xs" lay-submit="formReply" lay-filter="formReply">提交</button>
                                        </div>
                                    </form>
                                </div>
                                 </li>
                               <%}
                                    }%>
                              
                        </ul>
                        <!-- 没有评论 -->
                        <!-- <div class="emptybox">
                            <p><i style="font-size:50px;color:#5fb878" class="layui-icon"></i></p>
                            <p>暂无评论，大侠不妨来一发？</p>
                        </div> -->
                    </div>
                </div>
                <div class="layui-col-md4 right">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-sm6 layui-col-md12 padding0">
                            <div class="article-category shadow categoryOut">
                                <div class="article-category-title">分类导航</div>
                                <%if (listType != null)
                                                           {
                                                               for (int t = 0; t < listType.Count; t++)
                                                               { %>
                                 <a href="ArticleList.aspx?typeId=<%=listType[t].Id%>"><%=listType[t].TypeName %></a>
                                <%}
                                                           }%>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <div class="layui-col-sm6 layui-col-md12">
                            <div class="blog-card shadow">
                                <div class="blog-card-title">相似文章</div>
                                <ul class="blog-card-ul">
                                    <%if (ListSim != null)
                                        {
                                            for (int i = 0; i < ListSim.Count; i++)
                                            {


                                            %>
                                    
                                    <li>
                                        <%if (i < 3)
                                            { %>
                                        <span class="layui-badge "><%=i+1 %></span><%}
                                            else
                                            { %><span class="layui-badge layui-bg-blue"><%=i+1 %></span>
                                        
                                        <%} %>
                                        <a href="Detail.aspx?Id=<%=ListSim[i].Id%>"
                                            title="<%=ListSim[i].Title %>"><%=ListSim[i].Title%></a>
                                    </li>
                                    <%}} %>
                                </ul>
                            </div>
                        </div>
                        <div class="layui-col-sm6 layui-col-md12">
                            <div class="blog-card shadow sr-rightmodule">
                                <div class="blog-card-title">
                                    <span class="icon"><i class="layui-icon" aria-hidden="true"></i></span>
                                    <span class="text">随便看看</span>
                                </div>
                                <ul class="blog-card-ul">
                                    
                                    <%if (ListRandom != null)
                                        {
                                            for (int i = 0; i < ListRandom.Count; i++)
                                            {


                                            %>
                                    
                                    <li>
                                        <%if (i < 3)
                                            { %>
                                        <span class="layui-badge "><%=i+1 %></span><%}
                                            else
                                            { %><span class="layui-badge layui-bg-blue"><%=i+1 %></span>
                                        
                                        <%} %>
                                        <a href="Detail.aspx?Id=<%=ListRandom[i].Id%>"
                                            title="<%=ListRandom[i].Title %>"><%=ListRandom[i].Title%></a>
                                    </li>
                                    <%}} %>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--右侧悬浮分类导航 平板或手机设备显示-->
                    <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
                </div>
            </div>
        </div>
    <div class="bdsharebuttonbox" style="display:none;position:absolute;left:25%;top:10%">
 <a href="#" class="bds_more" data-cmd="more"></a><a href="#"
  class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#"
  class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#"
  class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#"
  class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#"
  class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#"
  class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
</div>

     <!-- 本页特有js -->
    <script src="../res/js/prettify.js"></script>
    <script>

        window._bd_share_config = {
            common: {
                bdText: '大家来快来看看吧',
                bdDesc: '<%=Arti.Digest%>',
                bdUrl: 'http://www.baidu.com',
                bdPic: '<%=Arti.HomeImg%>'
            },
            share: [{
                "bdSize": 16
            }],
            slide: [{
                bdImg: 0,
                bdPos: "right",
                bdTop: 100
            }],
            image: [{
                viewType: 'list',
                viewPos: 'top',
                viewColor: 'black',
                viewSize: '16',
                viewList: ['qzone', 'tsina', 'huaban', 'tqq', 'renren']
            }],
            selectShare: [{
                "bdselectMiniList": ['qzone', 'tqq', 'kaixin001', 'bdxc', 'tqf']
            }]
        }
        with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=' + ~(-new Date() / 36e5)];
    </script>
    <script type="text/javascript">
        var shareIndex, $;
       
        prettyPrint(); //渲染文章中的代码

        layui.use(['layer', 'form'], function () {
            $ = layui.$;
            var form = layui.form
                , device = layui.device();
            $('#praiseCnt').text(<%=Arti.PresentCount%>);

            //文章顶部工具栏按钮点击事件
            $('.tool-box button').on('click', function () {
                var title = $(this).attr('title');
                switch (title) {
                    case '全屏阅读':
                        var content = $('.article-detail').prop("outerHTML");
                        layer.open({
                            title: false,
                            type: 1,
                            content: content,
                            closeBtn: 0,
                            scrollbar: false,
                            area: ['100vw', '100vh'],
                            success: function (layero, index) {
                                $(layero).find('.article-tool').html('<div class="tool-box"><div class="layui-btn-group"><button class="layui-btn layui-btn-primary layui-btn-xs" title="关闭全屏"><i class="fa fa-compress fa-fw"></i></button></div></div>');
                                $(layero).find('.article-tool button').on('click', function () {
                                    layer.close(index);
                                });
                            }
                        });
                        break;
                    case '展开阅读':
                        $('.right').hide();
                        $('.left').css({
                            'width': '100%'
                        });
                        $(this).attr('title', '收缩阅读');
                        $(this).html('<i class="fa fa-compress fa-fw"></i>');
                        break;
                    case '收缩阅读':
                        $('.right').show();
                        $('.left').css('width', '');
                        $(this).attr('title', '展开阅读');
                        $(this).html('<i class="fa fa-arrows-h fa-fw"></i>');
                        break;
                    case '字体缩小':
                        var fontsize = Number($('.article-detail').data('fontsize'));
                        fontsize = fontsize - 1;
                        if (fontsize < 12) fontsize = 12;
                        $('.article-detail').data('fontsize', fontsize);
                        $('.article-detail-abstract,.article-detail-content').css('font-size', fontsize + 'px');
                        break;
                    case '字体还原':
                        $('.article-detail').data('fontsize', 14);
                        $('.article-detail-abstract,.article-detail-content').css('font-size', '');
                        break;
                    case '字体放大':
                        var fontsize = Number($('.article-detail').data('fontsize'));
                        fontsize = fontsize + 1;
                        if (fontsize > 20) fontsize = 20;
                        $('.article-detail').data('fontsize', fontsize);
                        $('.article-detail-abstract,.article-detail-content').css('font-size', fontsize + 'px');
                        break;
                    case '静音':
                        $(this).attr('title', '开启');
                        $(this).html('<i class="fa fa-volume-off fa-fw"></i>');
                        ap.volume(0, false);
                        break;
                    case '开启':
                        $(this).attr('title', '静音');
                        $(this).html('<i class="fa fa-volume-up fa-fw"></i>');
                        ap.volume(0.5, false);
                        break;
                    default:
                }
            });

            //回复按钮点击事件
            $('.btn-reply').on('click', function () {
                var targetId = $(this).data('targetid')
                    , targetName = $(this).data('targetname')
                    , $container = $(this).parent('p').parent().siblings('.replycontainer');
               
                if ($(this).text() == '回复') {
                    $container.find('textarea').attr('placeholder', '回复【' + targetName + '】');
                    $container.removeClass('layui-hide');
                    $container.find('input[name="targetUserId"]').val(targetId);
                    $(this).parents('.blog-comment li').find('.btn-reply').text('回复');
                    $(this).text('收起');
                } else {
                    $container.addClass('layui-hide');
                    $container.find('input[name="targetUserId"]').val(0);
                    $(this).text('回复');
                }
            });

            //监听留言回复提交
            form.on('submit(formReply)', function (data) {
                if ($(data.elem).hasClass('layui-btn-disabled')) {
                    return false;
                }
                //alert(JSON.stringify(data.field));
                //console.log(JSON.stringify(data.field));
                //return false;
                var index = layer.load(1);
                $.ajax({
                    type: 'post',
                    url: '/FrontEnd.ashx?action=replyComment',
                    data: data.field,
                    
                    success: function (res) {
                        layer.close(index);
                        if (res.code === 1) {
                            layer.msg(res.msg, { icon: 6 });
                            setTimeout(function () {
                                location.reload(true);
                            }, 500);
                        } else {
                            if (res.msg != undefined) {
                                layer.msg(res.msg, { icon: 5 });
                            } else {
                                layer.msg('程序异常，请重试或联系作者', { icon: 5 });
                            }
                        }
                    },
                    error: function (e) {
                        layer.close(index);
                        layer.msg("请求异常", { icon: 2 });
                    }
                });
                return false;
            });
            var events = {
                //分享
                share: function () {
                    //layer.msg('使用的百度分享组件');
                    //var html = '<div class="bdsharebuttonbox">'
                    //    + '<a href = "#" class="bds_more" data - cmd="more" ></a> <a href="#"'
                    //    + ' class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#"'
                    //    + ' class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#"'
                    //    + ' class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#"'
                    //    + '  class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#"'
                    //    + '   class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#"'
                    //    + '   class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>'
                    //    +'</div >'
                    //layer.open({
                    //    type: 1,
                    //    content:html

                    //})
                    
                }

                //点赞
                , praise: function () {
                    var localdata = layui.data('blog')
                        , articleId = $('#hidArticleId').val()
                        , self = this;
                   
                    if (localdata['praise' + articleId]) {
                        layer.tips('你已点过赞了，若收获颇大，可打赏作者！^_^', self, { tips: 1, time: 2000 });
                        return;
                    }
                    //服务器点赞数加一
                    //存储是否点赞该文
                    layui.data('blog', {
                        key: 'praise' + $('#hidArticleId').val()
                        , value: true
                    });
                    //点赞+1
                    var cnt = Number($('#praiseCnt').text()) + 1;

                    $.get({
                        url: "/FrontEnd.ashx?action=addPresent&artId=" + articleId
                    });

                    $('#praiseCnt').text(cnt);
                    layer.tips('Thank you ^_^', self, { tips: 1, time: 2000 });
                }

                //打赏
                , reword: function () {
                    layer.tab({
                        area: ['330px', '373px'],
                        shade: 0.6,
                        tab: [{
                            title: '微信',
                            content: '<img style="width:330px;height:330px;" src="../res/images/wx_reward.png" />'
                        }, {
                            title: '支付宝',
                            content: '<img style="width:330px;height:330px;" src="../res/images/ali_reward.jpg" />'
                        }]
                    });

                }
            };

            $('*[blog-event]').on('click', function () {
                var eventName = $(this).attr('blog-event');
                events[eventName] && events[eventName].call(this);
            });

            $('*[blog-event="reword"]').on('mouseover', function () {
                layer.tips('一元足以感动我 ^_^', this, { tips: 1, time: 2000 });
            });
        });
    </script>
</asp:Content>
